import React from 'react';
import { NavLink } from 'react-router-dom';


const NavHeader = (props) => {
    // 临时定义导航的样式, 有待于使用bootstrap的自带激活样式
    const style = (
        <style>{`
            .nav{
                margin: 30px 0;
            }
            .nav.nav-pills a{
                margin-right: 20px;
            }
            .nav.nav-pills a.active{
                background-color: #0089ff;
                color: white;
            }
        `}</style>
    );

    return (
        <nav className="nav nav-pills">
            { style }
            <li role="presentation">
                <NavLink to="/" exact activeClassName="active">首页</NavLink>
            </li>
            <li role="presentation">
                <NavLink to="/subreddit" activeClassName="active">Subreddit</NavLink>
            </li>
            <li role="presentation">
                <NavLink to="/counter" activeClassName="active">Counter</NavLink>
            </li>
        </nav>
    );
}

export default NavHeader;